<template>
  <div>

    <el-form label-width="100px" :model="form" :disabled="true">
      <el-form-item label="禁用:">
        <el-button size="mini">禁用 </el-button>
      </el-form-item>

      <el-form-item>
        <el-input type="text"></el-input>
      </el-form-item>
      <el-form label-width="100px" :model="form">
        <el-form-item label="不禁用:">
          <el-button  size="mini">不禁用 </el-button>
        </el-form-item>
      </el-form>

    </el-form>



    <el-button @click="getTable">获取table</el-button>
    <div v-for="(item,index) in tables" :key="item.id">
      <el-table ref="tableRef" :data="item.tableData" type="selection">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <template slot="empty">
          <div class="avue-crud__empty">
            <el-empty
                :image-size="100"
                description="暂无数据"></el-empty>
          </div>
        </template>
      </el-table>
    </div>




    <div style="padding: 0px 0 10px">带格子</div>
    <el-table
        ref="table1"
        class="epm-table"
        :data="data1"
        border
        stripe
        @selection-change="handleSelectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="wordCode"
          label="文档名称"
          align="center">
      </el-table-column>
      <el-table-column
          prop="wordName"
          label="文档名称"
          align="center">
      </el-table-column>
      <el-table-column
          prop="wordDate"
          label="文档日期"
          align="center">
      </el-table-column>
      <el-table-column
          prop="reciveDate"
          label="接收日期"
          align="center">
      </el-table-column>
      <el-table-column
          fixed="right"
          align="center"
          width="120px"
          label="操作">
        <template slot-scope="scope">
          <el-button  type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 20px 0 10px">带状态表格（点击当前行，当前行高亮）</div>
    <el-table
        ref="singleTable"
        class="epm-table"
        highlight-current-row
        @current-change="handleCurrentChange"
        :data="data1"
        border
        stripe
        :row-class-name="tableRowClassName"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="wordCode"
          label="文档名称"
      align="center">
      </el-table-column>
      <el-table-column
          prop="wordName"
          label="文档名称"
          align="center">
      </el-table-column>
      <el-table-column
          prop="wordDate"
          label="文档日期"
          align="center">
      </el-table-column>
      <el-table-column
          prop="reciveDate"
          label="接收日期"
          align="center">
      </el-table-column>
    </el-table>


    <div  style="padding: 20px 0 10px">多级表格</div>
    <el-table
        class="epm-table"
        :data="data1"
        :row-class-name="selectRowClassName"
        @selection-change="handleSelectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="wordInfo"
          align="center"
          label="文档信息">
          <el-table-column
              prop="wordCode"
              label="文档编码">
          </el-table-column>
          <el-table-column
              prop="wordName"
              label="文档命名">
          </el-table-column>
      </el-table-column>
      <el-table-column label="配送信息"  align="center">
        <el-table-column
            prop="wordDate"
            label="文档日期">
        </el-table-column>
        <el-table-column
            prop="reciveDate"
            label="接收日期">
        </el-table-column>
      </el-table-column>
<!--      <el-table-column
          fixed="right"
          align="center"
          width="120px"
          label="操作">
        <template slot-scope="scope">
          <el-button  type="text" size="small">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column>-->
    </el-table>


    <div style="padding: 10px">斑马线表格</div>
    <el-table
        class="epm-table"
        :data="data1"
        stripe
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          min-width="200px"
          label="地址">
      </el-table-column>
    </el-table>

    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="6">
          <el-input
              placeholder="输入关键字进行过滤"
              v-model="filterText">
          </el-input>

          <el-tree
              class="filter-tree"
              :data="data"
              :props="defaultProps"
              default-expand-all
              :filter-node-method="filterNode"
              ref="tree">
          </el-tree>
      </el-col>
      <el-col  :span="18">

      </el-col>
    </el-row>

    <el-row>
         <el-table border :data="form.tMilestonePlanList" class="cell-style-self progress-img"   :cell-class-name="clearPadding">
           <el-table-column label="序号" prop="index" header-align="center" align="center" min-width="80"  fixed>
             <template slot-scope="scope">
               {{scope.$index + 1}}
             </template>
           </el-table-column>
           <el-table-column label="里程碑计划名称" header-align="center" align="left" min-width="250" fixed
                            :show-overflow-tooltip="true">
             <template slot-scope="scope">
               <template><span style="display: inline-block;padding-left: 8px"></span>{{ scope.row.milestoneName }}</template>
             </template>
           </el-table-column>
           <el-table-column :label="column.year" header-align="center" align="center" v-for="column in form.columnHeader" :key="column.year" >
               <el-table-column width="60" align="center"
                   :prop="`${column.year}${month}`" :label="`${month}月`" :key="`${column.year}${month}`" v-for="month in column.months">
                      <template slot-scope="scoped">
                        <div style="display: flex;flex-wrap:nowrap;align-items: center;height: 100%;width: 100%;justify-content: flex-end">
                        <span :style="{display: 'inline-block',height:'20px',width:getWidth(column.year,month)}" :class="{ 'progress-blue': getIsActive(column.year,month,day,scoped.row) }" :key="day"  v-for="day in getDaysEveryMonth(column.year,month)">
                       </span>
                        </div>
                      </template>
               </el-table-column>
           </el-table-column>
         </el-table>
    </el-row>

    <AComponent :info="aComponentData"></AComponent>
    <el-button @click="changeInfo">改变</el-button>
  </div>
</template>
<script>
import AComponent from './AComponent.vue'
import searchCollapse from '@/com/searchCollapse'
export default {
  name:'list-index',
  components:{
    AComponent,
    searchCollapse
  },
  watch: {
    aComponentData:{
        handler(newValue,oldValue){
            console.log("父组件监听对象:",newValue)
        },
      deep:true,
      immediate:true
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    getTable(){
      let _this = this ;
      this.tables[0].tableData.map((item)=>{
        console.log("_this.$refs.tableRef[0]:",_this.$refs.tableRef[0])
        _this.$refs.tableRef[0].toggleRowSelection(item,true)
      })


    },
    getWidth(year,month){
        let daysNum = this.getDays(year,month) ;
        let data = 1/daysNum ;
        return (data*100).toFixed(2)+"%";
    },
    getIsActive(year,month,day,rowData){
      let curDate = year+'-'+month+'-'+day ;
      //console.log(year,month,day,rowData) ;
      return new Date(rowData.beginDate) <= new Date(curDate).getTime() && new Date(rowData.endDate) >= new Date(curDate).getTime();
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    clearPadding(row){
      if (row.columnIndex != 1 ||row.columnIndex != 0) {
        return 'clearPadding'//给第2个td里面添加goodsInfo的类名
      }
    },
    getDays(years,mons){
      //第一位是0去掉
      years = Number(years) ;
      if(mons.charAt(0) == '0'){
        mons = mons.substring(1, mons.length);
      }
      mons = Number(mons)
      let arr=[]
      if(years%4 == 0 && years%100 != 0 || years%400 == 0){
        arr=[31,29,31,30,31,30,31,31,30,31,30,31]
      }else{
        arr=[31,28,31,30,31,30,31,31,30,31,30,31]
      }
      return arr[mons-1]
    },
    getDaysEveryMonth(year,month){
      let days = this.getDays(year,month) ;
     // console.log("days:",days);

      let daysBlank = new Array(days).fill('');
      let daysFill = [] ;
      daysBlank.map((it,index)=>{
        daysFill.push(index+1 < 10 ? '0'+(index+1) : ''+(index+1))
      })
      return daysFill ;
    },
    changeInfo(){
      this.aComponentData.bag.children[0].aa = "bb" ;
      console.log("this.aComponentData",this.aComponentData)
    },
    handleSelectionChange(list) {
      this.selectionList = [];
      if (list.length > 1) {
        this.$refs.table1.clearSelection();
        this.$refs.table1.toggleRowSelection(
            list[list.length - 1]
        );
      }
      this.selectionList = [list[list.length - 1]];
    },
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      }
      return '';
    },
    selectRowClassName({row, rowIndex}){
      if (rowIndex === 1) {
        return 'warning-row';
      }
      return '';
    }

  },
  created() {
    this.handleCurrentChange(this.data1[0])
  },
  data() {
    return {
      tables:[
        {
          tableData:[
            {id:'1',name:'张三',age:'24'},
            {id:'2',name:'张三',age:'24'},
            {id:'3',name:'张三',age:'24'},
          ]
        } ,
        {
          tableData:[
            {id:'4',name:'李四',age:'24'},
            {id:'5',name:'李四',age:'24'},
            {id:'6',name:'李四',age:'24'},
          ]
        }
      ],
      aObj:{age:'23'},
      aComponentData:{name:'张三',children:[{a:'a',b:'b'}],bag:{color:'red',type:'双肩包',children:[{aa:'aa'},{bb:'bb'}]}},
      isActive:false,
      //months:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],
      // monthsDic:[{mName:"Jan",days:"31",month:'01'},{mName:"Feb",days:"31",month:'02'},{mName:"Mar",days:"31",month:'03'},{mName:"Apr",days:"31",month:'04'}
      //   ,{mName:"May",days:"31",month:'05'},{mName:"Jun",days:"31",month:'06'},{mName:"Jul",days:"31",month:'07'},{mName:"Aug",days:"31",month:'08'},{mName:"Sep",days:"31",month:'09'},
      //   {mName:"Oct",days:"31",month:'10'},{mName:"Nov",days:"31",month:'11'},{mName:"Dec",days:"31",month:'12'}],
      // columns:[{name:'2020',prop:'2020'},{name:'2021',prop:'2021'},{name:'2022',prop:'2022'}],
      // columnHeader:[{year:'2020',prop:'2020'},{year:'2021',prop:'2021'},{year:'2022',prop:'2022'}],
      // tableHeader : [
      //   { label: '2020', value: 'cur_month_toll' },
      //   { label: '2021', value: 'total_toll' },
      //   { label: '2022', value: 'targetComplete' },
      //   { label: '2023', value: 'expect_complete' },
      //   { label: '2024', value: 'expect_complete' },
      // ],

      form:{
        columnHeader:[{year:'2020',prop:'2020',months:['10','11','12']},{year:'2021',prop:'2021',months:['01','02','03','04','05','06','07','08','09','10','11','12']},{year:'2022',prop:'2022',months:['01','02','03','04','05','06','07','08','09','10']}],
        tMilestonePlanList:[{
          "id": "129",
          "milestoneName": "里碑4",
          "beginDate": "2020-10-15",
          "endDate": "2022-10-12",
          "remark": "里碑4",
          "2021Jan":'1',
          "2021Feb":'2',
          "2021Mar":'3',
          "2021Apr":'4',
          "2021May":'5',
          "2022Jan":'1',
          "2022Feb":'2',
          "2022Mar":'3',
          "2022Apr":'4',
          "2022May":'5',
          "2023Jan":'1',
          "2023Feb":'2',
          "2023Mar":'3',
          "2023Apr":'4',
          "2023May":'5',
          "projectId": "168",
          "createUser": null,
          "createDate": null,
          "updateUser": null,
          "updateDate": null,
          "tpid": null,
           "data":{
             "2021":[
               {"mname":'Jan',"type":'start'},
               {"mname":'Feb',"type":'middle'},
               {"mname":'Mar',"type":'middle'},
              ]
           }

        }, {
          "id": "128",
          "milestoneName": "里碑3",
          "beginDate": "2021-10-01",
          "endDate": "2022-10-12",
          "remark": "里碑3",
          "projectId": "168",
          "createUser": null,
          "createDate": null,
          "updateUser": null,
          "updateDate": null,
          "tpid": null,
          "2022Jan":'1',
          "2022Feb":'2',
          "2022Mar":'3',
          "2022Apr":'4',
          "2022May":'5',
        }, {
          "id": "126",
          "milestoneName": "里碑1",
          "beginDate": "2022-10-01",
          "endDate": "2022-10-31",
          "remark": "里碑1",
          "projectId": "168",
          "createUser": null,
          "createDate": null,
          "updateUser": null,
          "updateDate": null,
          "tpid": null,
          "2021Jan":'1',
          "2021Feb":'2',
          "2021Mar":'3',
          "2021Apr":'4',
          "2021May":'5',
        }, {
          "id": "127",
          "milestoneName": "里碑2",
          "beginDate": "2022-10-18",
          "endDate": "2022-10-31",
          "remark": "里碑2",
          "projectId": "168",
          "createUser": null,
          "createDate": null,
          "updateUser": null,
          "updateDate": null,
          "tpid": null,
          "2021Jan":'1',
          "2021Feb":'2',
          "2021Mar":'3',
          "2021Apr":'4',
          "2021May":'5',
        }]
      },
      filterText: '',
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data1:[{wordCode:'PPGRP-EPM2-TZ-0022-HF-EPM1',wordName:'PPGRPPPGRPPPGRPPPGRPPPGRP.doc',wordDate:'2021-02-18',reciveDate:'2021-02-18  12:27:52'},
        {wordCode:'PPGRP-EPM2-TZ-0022-HF-EPM1',wordName:'PPGRPPPGRPPPGRPPPGRPPPGRP.doc',wordDate:'2021-02-18',reciveDate:'2021-02-18  12:27:52'},
        {wordCode:'PPGRP-EPM2-TZ-0022-HF-EPM1',wordName:'PPGRPPPGRPPPGRPPPGRPPPGRP.doc',wordDate:'2021-02-18',reciveDate:'2021-02-18  12:27:52'},
        {wordCode:'PPGRP-EPM2-TZ-0022-HF-EPM1',wordName:'PPGRPPPGRPPPGRPPPGRPPPGRP.doc',wordDate:'2021-02-18',reciveDate:'2021-02-18  12:27:52'},
        {wordCode:'PPGRP-EPM2-TZ-0022-HF-EPM1',wordName:'PPGRPPPGRPPPGRPPPGRPPPGRP.doc',wordDate:'2021-02-18',reciveDate:'2021-02-18  12:27:52'}
      ],
      multipleSelection:[],
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-08',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-06',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-07',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      currentRow: null,
    };
  },

};
</script>

<style lang="less" >
.cell-style-self.el-table td,
.cell-style-self.el-table td,
.cell-style-self.el-table td .cell {
  //padding-right: 0;
  //padding-left: 0;

}
/*.progress-img /deep/.el-table .cell{padding-right: 0px!important;padding-left: 0!important;}*/
.progress{display: inline-block;background: #C5E9F9;height: 80%}
.clearPadding {
  //padding-right: 0px!important;padding-left: 0!important;
}

//.el-table td.el-table__cell div {padding-right: 0px!important;padding-left: 0!important;}
.progress-blue{background:#C5E9F9 }


.epm-table.el-table{color: #303133;font-family: 'Microsoft YaHei';}
.epm-table.el-table thead,
.epm-table.el-table th{font-weight: normal;font-size: 14px;color: #303133;font-family: 'Microsoft YaHei';}
.epm-table.el-table th.el-table__cell{background: #E3E6EC;padding: 8px 0 }
.epm-table.el-table thead.is-group th.el-table__cell{background:#E3E6EC}
.epm-table.el-table .el-table__cell{padding: 7px 0}
.epm-table table{border: #CDD0D6}

.epm-table.el-table td.el-table__cell, .epm-table.el-table th.el-table__cell.is-leaf{border-bottom:1px solid #CDD0D6}
.epm-table.el-table--border .el-table__cell, .epm-table.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{border-bottom:1px solid #CDD0D6}
.epm-table.el-table--border .el-table__cell, .epm-table.el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{border-right:1px solid #CDD0D6}
.epm-table .el-table--border, .epm-table .el-table--group{border-bottom:1px solid #D9D9D9;}
.epm-table .el-checkbox:last-of-type{display: flex;flex-direction: column;align-content: center;margin-right: 0px;text-align: center}
.epm-table .el-table__body-wrapper.is-scrolling-left~.el-table__fixed,
.epm-table .el-table__body-wrapper.is-scrolling-none~.el-table__fixed,
.epm-table .el-table__body-wrapper.is-scrolling-none~.el-table__fixed-right,
.epm-table .el-table__body-wrapper.is-scrolling-right~.el-table__fixed-right{box-shadow: 0 0 10px rgba(0,0,0,.12)}
//.epm-table .el-table__row td:first-child{border-left: 1px solid  #D9D9D9}
.epm-table .el-checkbox__inner{border: 1px solid #606266}

.epm-table.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{background:#F6F9FF }

.epm-table .el-table__body tr.current-row>td.el-table__cell{background: #D8E9FF}
.epm-table .el-table__body tr.hover-row.current-row>td,
.epm-table .el-table__body tr.hover-row.el-table__row--striped.current-row>td,
.epm-table .el-table__body tr.hover-row.el-table__row--striped>td,
.epm-table .el-table__body tr.hover-row>td{
  background-color:#F6F9FF;}

.epm-table.el-table .warning-row {
  background: oldlace;
}

.epm-table.el-table .success-row {
  background: #f0f9eb;
}

.epm-table.el-table--striped .el-table__body tr.el-table__row--striped.warning-row  td.el-table__cell{ background: #EFC5C5;}

</style>